<!-- 项目导航树分类组件 -->
<template>
  <a-layout-sider :width="230" class="layoutsider" :collapsed="false">
    <div class="project-category">
      <ul>
        <li :class="{ active: fileType === 0 }" @click="getSelct(0)" style="margin-top: 10px;">
          <a-tooltip placement="right" color="#f56a00">
            <a-space>
              首页
            </a-space>
            <template #title> 首页 </template>
          </a-tooltip>
        </li>
        <div class="xian"></div>
        <li :class="{ active: fileType === 1 }" @click="getSelct(1)">
          <a-tooltip placement="right" color="#87d068">
            <a-space>
              传输
            </a-space>
            <template #title> 传输 </template>
          </a-tooltip>
        </li>
        <!-- <div class="xian"></div> -->
      </ul>
    </div>

    <!-- 首页的二级选项 -->
    <DataListSider v-if="fileType === 0"></DataListSider>

    <!-- 传输的二级选项 -->
    <TransmitSider v-if="fileType === 1"></TransmitSider>

  </a-layout-sider>
</template>

<script>
import TransmitSider from './SiderChild/TransmitSider.vue';
import DataListSider from './SiderChild/DataListSider.vue';
export default {
  components: {
    TransmitSider,
    DataListSider
  },
  data() {
    return {
      fileType: this.$store.state.fileType
    }
  },
  methods: {
    // 选择选项
    getSelct(type) {
      this.$store.commit('editFileType', type);
      this.fileType = type
      switch (type) {
        case 0: // 首页
          this.$router.push({
            name: 'main'
          })
          this.$store.commit('edittransmitType', 2) // 点击了首页之后，保证再次点击传输展示传输完成页面
          break;
        case 1: //传输
          this.$router.push({
            name: 'transfer'
          })
          this.$store.commit('editdataListType', 0) // 点击了传输之后，保证再次点击首页展示首页数据订单页面
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.ant-layout-sider {
  background-color: #ebf1f7;
}

.ant-layout-sider-collapsed {
  flex: 0 0 79px !important;
  max-width: 79px !important;
  min-width: 79px !important;
  width: 79px !important;
}

.project-category {
  float: left;
  // width: 60px;
  // background: #001529;
  height: 100vh;
  position: relative;
  width: 79px;
  background: #0C4E81;
  color: #FFFFFF;
  font-size: 18px;
  font-family: 'PingFangSC-Semibold';
  font-weight: 600;

  ul {
    padding: 0;
    width: 100%;

    li {
      width: 100%;
      display: flex;
      justify-content: center;
      height: 84px;
      cursor: pointer;
      margin-bottom: 15px;
      transition: all 0.5s ease;
      position: relative;
      background-image: url('@/assets/images/left-select.png');
      background-repeat: no-repeat;
      background-position: 79px 0;
    }

    li:hover,
    li.active {
      transform: translateX(13px);
      background-position: 0;
      color: #0273C4;
    }
  }

  .tree-category,
  .collapsed-btn-wrap,
  .project-archive {
    height: 52px;
    width: 100%;
    line-height: 52px;
    text-align: center;
    position: absolute;
    bottom: 95px;
    z-index: 10;
    color: #fff;
    font-size: 24px;
  }

  .collapsed-btn-wrap {
    bottom: 10px;
  }

  .project-archive {
    bottom: 52px;
  }
}

.xian {
  border: 1px solid rgba(255, 255, 255, 0.20);
  height: 1px;
  width: 55px;
  transform: translateX(12px);
  margin-bottom: 10px;
}
</style>
